<template>
  <view class="guest-info-container">
    <view class="title">入住人信息</view>
    <view class="room-person-info">
      <text class="room-text">1房</text>
      <text class="person-text">2人</text>
      <text class="add-guest" @click="handleAddGuest">+ 同住人</text>
    </view>
    <view class="room-card">
      <text class="room-name">房间1</text>
      <view class="name-input-group">
        <view class="name-item">
          <text class="label">姓：</text>
          <input class="input" type="text" placeholder="请输入" v-model="lastName" />
        </view>
        <view class="name-item">
          <text class="label">名：</text>
          <input class="input" type="text" placeholder="请输入" v-model="firstName" />
        </view>
      </view>
      <view class="gender-select">
        <radio-group @change="handleGenderChange">
          <label class="gender-label">
            <radio :value="1" :checked="gender === 1" />男
          </label>
          <label class="gender-label">
            <radio :value="2" :checked="gender === 2" />女
          </label>
        </radio-group>
      </view>
    </view>
    <view class="tip">
      <text class="tip-icon">!</text>
      <text class="tip-text">所有入住客人的姓名/英文名一一对应，如不一一对应，酒店有权拒绝入住。</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 姓
const lastName = ref('');
// 名
const firstName = ref('');
// 性别，1为男，2为女
const gender = ref(1);

// 处理同住人添加
const handleAddGuest = () => {
  console.log('点击添加同住人');
  // 实际项目中可弹出添加同住人表单等逻辑
};

// 处理性别选择变化
const handleGenderChange = (e) => {
  gender.value = parseInt(e.detail.value);
};
</script>

<style scoped>
.guest-info-container {
  padding: 20rpx;
  background-color: #fff;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.room-person-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.room-text,
.person-text {
  font-size: 28rpx;
}

.add-guest {
  font-size: 26rpx;
  color: #007aff;
}

.room-card {
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.room-name {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  display: block;
}

.name-input-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.name-item {
  display: flex;
  align-items: center;
}

.label {
  font-size: 26rpx;
  margin-right: 10rpx;
}

.input {
  width: 200rpx;
  height: 60rpx;
  border: 1rpx solid #eee;
  border-radius: 5rpx;
  padding-left: 10rpx;
}

.gender-select {
  display: flex;
  align-items: center;
}

.gender-label {
  margin-right: 20rpx;
  font-size: 26rpx;
}

.tip {
  display: flex;
  align-items: flex-start;
}

.tip-icon {
  display: inline-block;
  width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  background-color: #e5e5e5;
  color: #666;
  border-radius: 50%;
  font-size: 22rpx;
  margin-right: 10rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #666;
  line-height: 36rpx;
}
</style>